import React,{ useEffect, useState, Fragment } from 'react'
import { history, connect } from 'umi'

import ImageView from '@/components/BaseComponent/ImageView'
import '../../assets/person/index.less'
function index(props:any) {
  const { home: { userInfo } } = props;  
  // console.log('props: ', props)
  let [personObj,setpersonObj] = useState<any>([])
  let [pathObj,setpathobj] = useState(
    [
      {
        name:'推荐有礼',
        img:require('../../assets/个人中心.jpg'),
        path:'/recommended'
      },
      {
        name:'更换手机',
        img:require('../../assets/个人中心2.jpg'),
        path:'/changePhone'
      },
      {
        name:'反馈建议',
        img:require('../../assets/个人中心3.jpg') ,
        path:'/feedback'
      }
    ])
  useEffect(() => {
  //  Axios.get('/getPerson').then(res=>{
  //    setpersonObj(personObj=res.data.data)
  //  })
  }, [])
  
  const onLoginClick = () => {
    // console.log('用户点击登陆') 
    history.push('/login')
  }

  return (
    <div className='person'>
      <div className='person_header'>
        {
          userInfo.avatar ? (<Fragment>
            <p className='person_header_img'>
            <ImageView src={userInfo.avatar}/>
            </p>
            <div className='person_header_font'>
             <span onClick={onLoginClick} style={{ fontSize: '.3rem' }}>{'继续完善用户信息'}</span>
              {/* <span>{personObj.tel}</span> */}
            </div>
            </Fragment>) : (<Fragment>
              <p className='person_header_img'>
                <img src={personObj.img} alt=""/>
              </p>
              <div className='person_header_font'>
                <span onClick={onLoginClick} style={{ fontSize: '20px' }}>{'继续完善用户信息'}</span>
                <span></span>
              </div>
            </Fragment>)
        }

      </div>
      <div className='person_main'>
        {
          pathObj.map((item:any,index:number)=>{
              return <li key={index} onClick={()=>{
                props.history.push(item.path)
              }}>
                <img src={item.img} alt=""/>
                
                <span>
                  {item.name}
                </span>
              </li>
          })
        }
      </div>
      <div className='person_foot'>
        <a>
          摩羯座网路科技
        </a>
        <span>Copyright @ 2008-2018 weui.io</span>
      </div>
    </div>
  )
}

export default connect(state => {
  return { ...state }
})(index)
